<template>
  <PageContainer>
    <a-card :bordered="false">
      <template #extra>
        <a-space size="middle">
          <a-popconfirm title="确定要开始迁移数据？" disabled @confirm="transferData">
            <a-button type="primary" disabled>迁移Oracle的增量数据</a-button>
          </a-popconfirm>
          <a-button type="primary" disabled :loading="checkButtonDisable" @click="check">check迁移结果</a-button>
          <a-popconfirm title="确定要开始创建索引吗？" disabled @confirm="createIndex">
            <a-button type="primary" disabled>创建索引</a-button>
          </a-popconfirm>
          <a-popconfirm title="确定要开始创建测试数据吗？" disabled @confirm="createTestData">
            <a-button type="primary" disabled>创建10亿测试数据</a-button>
          </a-popconfirm>
        </a-space>
      </template>
      <a-table
        class="ant-table-striped"
        :data-source="dataSource"
        :columns="columns"
        :row-key="recode => recode.id"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'progressBar'">
            <a-progress
              :percent="
                Math.trunc(
                  ((record.tempEnd - record.shardingStart + 1) * 100) / (record.shardingEnd - record.shardingStart + 1),
                )
              "
            />
          </template>
        </template>
      </a-table>
    </a-card>
  </PageContainer>
</template>

<script setup lang="ts">
import * as wxMemberApi from '@/api/data/wxMemberOracleToMongo';
import { PageContainer as PageContainer } from '@ant-design-vue/pro-layout';
import type { Ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import * as jobAPi from '@/api/job/job';

const currentPageJob = 'WxMemberIncrementalJob';

function createIndex() {
  wxMemberApi.createIndex().then(jsonResult => {
    message.info('执行成功!');
  });
}

let createTestDataDisabled = ref(false);

function createTestData() {
  createTestDataDisabled.value = true;
  wxMemberApi.createTestData().then(jsonResult => {
    message.info('执行成功!');
  });
}

/*
 *迁移数据button
 */
function transferData() {
  jobAPi.triggerJob({ jobName: currentPageJob }).then(jsonResult => {
    message.success(jsonResult?.message);
  });
}

/*
 *迁移进度table
 */
const columns = [
  {
    title: '分片id',
    dataIndex: 'shardingItem',
  },
  {
    title: '总分片',
    dataIndex: 'shardingTotalCount',
  },
  {
    title: '分片开始页数',
    dataIndex: 'shardingStart',
  },
  {
    title: '分片结束页数',
    dataIndex: 'shardingEnd',
  },
  {
    title: '迁移结束页数',
    dataIndex: 'tempEnd',
  },
  {
    title: '进度======================>',
    key: 'progressBar',
  },
  {
    title: '耗时（秒）',
    dataIndex: 'duration',
  },
  {
    title: '异常信息',
    dataIndex: 'exception',
  },
];
//迁移进度数据
let dataSource = ref([]);
//定时获取迁移进度
let progressBarId: number;
onBeforeMount(() => {
  progressBarId = setInterval(progress, 800, { jobName: currentPageJob }, dataSource);
});
onBeforeUnmount(() => {
  if (progressBarId != null) {
    clearInterval(progressBarId);
  }
});

function progress(params: object, dataSource: Ref) {
  wxMemberApi.progressBar(params).then(jsonResult => {
    if (!jsonResult) {
      return;
    }
    dataSource.value = jsonResult.result;
  });
}

let checkButtonDisable = ref(false);
let checkedFlag = false;
function check() {
  checkButtonDisable.value = true;
  wxMemberApi.checkResult({ jobName: currentPageJob }).then(jsonResult => {
    if (jsonResult?.result) {
      //显示check结果
      Modal.info({
        title: 'check结果',
        content: h('div', {}, [h('p', JSON.stringify(jsonResult?.result))]),
      });
      checkButtonDisable.value = false;
    } else {
      //没有checkResult的话，触发一次
      if (!checkedFlag) {
        wxMemberApi.check({ jobName: currentPageJob }).then(jsonResult => {
          checkedFlag = true;
          checkButtonDisable.value = false;
        });
      }
    }
  });
}
</script>

<style lang="less" scoped>
.paddingBottom {
  margin-bottom: 30px;
}

.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
</style>
